<style>
.tiles .cell {flex: none;}
</style>


<div class="section">
  <div class="heading">
    <div class="title"><strong>基本用法</strong></div>
  </div>
  <div class="box">
    <button type="button" class="btn">按钮</button>
    <button type="button" class="btn gray"><i class="icon icon-star"></i></button>
    <button type="button" class="btn text-primary">按钮</button>
    <button type="button" class="btn primary">按钮</button>
    <button type="button" class="btn disabled" disabled>已禁用</button>
    <button type="button" class="btn loading loading-light gray">加载中</button>
    <hr class="space">
    <button type="button" class="btn gray">按钮 <span class="label success">23</span></button>
    <button type="button" class="btn gray has-badge">按钮 <span class="label badge red circle">2</span></button>
  </div>
  <pre>
<code>&lt;a href=&quot;&quot; class=&quot;btn&quot;&gt;&#x6309;&#x94ae;&lt;/a&gt;
&lt;button type=&quot;button&quot; class=&quot;btn gray&quot;&gt;&lt;i class=&quot;icon icon-star&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn text-primary&quot;&gt;&#x6309;&#x94ae;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn primary&quot;&gt;&#x6309;&#x94ae;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn disabled&quot; disabled&gt;&#x5df2;&#x7981;&#x7528;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn loading loading-light gray&quot;&gt;&#x52a0;&#x8f7d;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn gray&quot;&gt;&#x6309;&#x94ae; &lt;span class=&quot;label success&quot;&gt;23&lt;/span&gt;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn gray has-badge&quot;&gt;&#x6309;&#x94ae; &lt;span class=&quot;label badge red circle&quot;&gt;2&lt;/span&gt;&lt;/button&gt;</code></pre>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>大小</strong></div>
  </div>
  <div class="box">
    <button type="button" class="btn btn-sm primary">迷你按钮</button> <code>.btn.btn-sm</code>
    <hr class="space">
    <button type="button" class="btn primary">普通按钮</button> <code>.btn</code>
    <hr class="space">
    <button type="button" class="btn btn-lg primary">较大按钮</button> <code>.btn.btn-lg</code>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>外观选项</strong></div>
  </div>
  <div class="box article">
    <p>外观选项用法参考 <strong class="text-link">基础 > 外观</strong> 章节。以下列举按钮的常见用法。</p>
    <div class="row tiles">
      <div class="cell"><div class="btn primary">.btn.primary</div></div>
      <div class="cell"><div class="btn success">.btn.success</div></div>
      <div class="cell"><div class="btn danger">.btn.danger</div></div>
      <div class="cell"><div class="btn warning">.btn.warning</div></div>
      <div class="cell"><div class="btn info">.btn.info</div></div>
      <div class="cell"><div class="btn special">.btn.special</div></div>
      <div class="cell"><div class="btn important">.btn.important</div></div>
      <div class="cell"><div class="btn dark">.btn.dark</div></div>
      <div class="cell"><div class="btn inverse">.btn.inverse</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary-pale">.btn.primary-pale</div></div>
      <div class="cell"><div class="btn success-pale">.btn.success-pale</div></div>
      <div class="cell"><div class="btn danger-pale">.btn.danger-pale</div></div>
      <div class="cell"><div class="btn warning-pale">.btn.warning-pale</div></div>
      <div class="cell"><div class="btn info-pale">.btn.info-pale</div></div>
      <div class="cell"><div class="btn special-pale">.btn.special-pale</div></div>
      <div class="cell"><div class="btn important-pale">.btn.important-pale</div></div>
      <div class="cell"><div class="btn gray">.btn.gray</div></div>
      <div class="cell"><div class="btn white">.btn.white</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary-pale text-tint">.btn.primary-pale.text-tint</div></div>
      <div class="cell"><div class="btn success-pale text-tint">.btn.success-pale.text-tint</div></div>
      <div class="cell"><div class="btn danger-pale text-tint">.btn.danger-pale.text-tint</div></div>
      <div class="cell"><div class="btn warning-pale text-tint">.btn.warning-pale.text-tint</div></div>
      <div class="cell"><div class="btn info-pale text-tint">.btn.info-pale.text-tint</div></div>
      <div class="cell"><div class="btn special-pale text-tint">.btn.special-pale.text-tint</div></div>
      <div class="cell"><div class="btn important-pale text-tint">.btn.important-pale.text-tint</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary outline">.btn.primary.outline</div></div>
      <div class="cell"><div class="btn success outline">.btn.success.outline</div></div>
      <div class="cell"><div class="btn danger outline">.btn.danger.outline</div></div>
      <div class="cell"><div class="btn warning outline">.btn.warning.outline</div></div>
      <div class="cell"><div class="btn info outline">.btn.info.outline</div></div>
      <div class="cell"><div class="btn special outline">.btn.special.outline</div></div>
      <div class="cell"><div class="btn important outline">.btn.important.outline</div></div>
      <div class="cell"><div class="btn dark outline">.btn.dark.outline</div></div>
      <div class="cell"><div class="btn inverse outline">.btn.inverse.outline</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary outline hover-solid">.btn.primary.outline.hover-solid</div></div>
      <div class="cell"><div class="btn success outline hover-solid">.btn.success.outline.hover-solid</div></div>
      <div class="cell"><div class="btn danger outline hover-solid">.btn.danger.outline.hover-solid</div></div>
      <div class="cell"><div class="btn warning outline hover-solid">.btn.warning.outline.hover-solid</div></div>
      <div class="cell"><div class="btn info outline hover-solid">.btn.info.outline.hover-solid</div></div>
      <div class="cell"><div class="btn special outline hover-solid">.btn.special.outline.hover-solid</div></div>
      <div class="cell"><div class="btn important outline hover-solid">.btn.important.outline.hover-solid</div></div>
      <div class="cell"><div class="btn dark outline hover-solid">.btn.dark.outline.hover-solid</div></div>
      <div class="cell"><div class="btn inverse outline hover-solid">.btn.inverse.outline.hover-solid</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary rounded">.btn.primary.rounded</div></div>
      <div class="cell"><div class="btn success outline rounded">.btn.success.outline.rounded</div></div>
      <div class="cell"><div class="btn danger rounded outline hover-solid">.btn.danger.outline.hover-solid.rounded</div></div>
      <div class="cell"><div class="btn danger-pale rounded">.btn.danger-pale.rounded</div></div>
      <div class="cell"><div class="btn warning-pale text-tint rounded">.btn.warning-pale.text-tint.rounded</div></div>
      <div class="cell"><div class="btn dark rounded">.btn.dark.rounded</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="btn primary circle">.btn.primary.circle</div></div>
      <div class="cell"><div class="btn success outline circle">.btn.success.outline.circle</div></div>
      <div class="cell"><div class="btn danger circle hover-solid outline">.btn.danger.outline.hover-solid.circle</div></div>
      <div class="cell"><div class="btn danger-pale circle">.btn.danger-pale.circle</div></div>
      <div class="cell"><div class="btn warning-pale text-tint circle">.btn.warning-pale.text-tint.circle</div></div>
      <div class="cell"><div class="btn dark circle">.btn.dark.circle</div></div>
    </div>
  </div>
</div>
